<template>
  <div>
    <a-modal
      destroyOnClose="true"
      v-model:visible="visible"
      title="修改密码"
      @ok="onSubmit"
      :confirmLoading="loading"
      @cancel="onCancel"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="旧密码" name="oldPassword">
          <a-input-password v-model:value="formState.oldPassword" />
        </a-form-item>
        <a-form-item label="新密码" name="newPassword">
          <a-input-password v-model:value="formState.newPassword" />
        </a-form-item>
        <a-form-item label="确认新密码" name="newPasswordel">
          <a-input-password v-model:value="formState.newPasswordel" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { initUserPassword } from '@/api/user/login';
import { message } from 'ant-design-vue';
import jsencrypt from '@/utils/jsencrypt-rsa';
import ls from '@/utils/local-storage';
import { useStore } from 'vuex';
import { STORAGE_TOKEN_KEY } from '@/store/mutation-type';
import { LOGOUT } from '@/store/modules/user/actions';
export default defineComponent({
  setup() {
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const loading = ref<boolean>(false);
    const store = useStore();
    const formRef = ref();
    const formState = reactive({
      oldPassword: '',
      newPassword: '',
      newPasswordel: '',
    });
    let validatePass = async () => {
      if (formState.newPasswordel.length < 6) {
        return Promise.reject('密码最低6位数...');
      }
      if (formState.newPasswordel !== formState.newPassword) {
        return Promise.reject('两次密码不一致');
      }
      return Promise.resolve();
    };
    const rules = {
      oldPassword: [
        {
          required: true,
          message: '请输入旧密码',
          type: 'string',
        },
        { min: 6, message: '密码最低6位数...', trigger: 'blur' },
      ],
      newPassword: [
        {
          required: true,
          message: '请输入新密码',
          type: 'string',
        },
        { min: 6, message: '密码最低6位数...', trigger: 'blur' },
      ],
      newPasswordel: [
        {
          required: true,
          message: '请输入新密码',
          type: 'string',
        },
        {
          validator: validatePass,
          trigger: 'change',
        },
        // { min: 6, message: '密码最低6位数...', trigger: 'blur' },
      ],
    };
    const onSubmit = () => {
      loading.value = true;
      formRef.value
        .validate()
        .then(values => {
          const rsa = new jsencrypt();
          if (values.oldPassword == values.newPassword) {
            message.error('修改失败!新密码与旧密码一样');
            loading.value = false;
            return;
          }
          values.oldPassword = rsa.encryptLong2(values.oldPassword);
          values.newPassword = rsa.encryptLong2(values.newPassword);
          initUserPassword(values)
            .then(res => {
              if (res.code == 200) {
                message.success('修改成功!请重新登录');
                visible.value = false;
                const token = ls.get(STORAGE_TOKEN_KEY);
                store.dispatch(`dictionary/CLEAR_TREE_PARAM`);
                store.dispatch(`user/${LOGOUT}`, { token });
                loading.value = false;
              } else {
                loading.value = false;
              }
            })
            .finally(() => {
              loading.value = false;
            });
        })
        .catch(error => {
          loading.value = false;
          console.log('error', error);
        });
    };
    const onCancel = () => {
      formRef.value.resetFields();
    };
    return {
      visible,
      showModal,
      formRef,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      formState,
      rules,
      onSubmit,
      loading,
      onCancel,
    };
  },
});
</script>
